<template>
  <el-drawer
    v-model="dialogFormVisible"
    :title="dialogTitle"
    size="50%"
    @close="handleClose"
  >
    <el-form
      :model="formData"
      ref="formRef"
      :rules="rules"
      label-position="right"
      label-width="80px"
      size="default"
      :scroll-to-error="true"
      :show-message="false"
    >
      <el-form-item
        label="作者"
        class="label-right-align"
        label-width="120px"
      >
        <el-text>{{ info.user?.real_name }}</el-text>
      </el-form-item>
      <el-form-item
        label="标题"
        class="label-right-align"
        label-width="120px"
      >
        <el-text>{{ info.title }}</el-text>
      </el-form-item>
      <el-form-item
        label="简介"
        class="label-right-align"
        label-width="120px"
        v-if="info.type!=1"
      >
        <el-text>{{ info.desc }}</el-text>
      </el-form-item>
      <el-form-item
        label="内容"
        class="label-right-align"
        label-width="120px"
        v-if="info.type==1"
      >
        <el-text>{{ info.content }}</el-text>
      </el-form-item>
      <el-form-item
        label="视频"
        class="label-right-align"
        label-width="120px"
        v-if="info.type==2"
      >
        <video :src="info.file?.file_path" class="video-box"></video>
      </el-form-item>
      <el-form-item
        label="文件"
        class="label-right-align"
        label-width="120px"
        v-if="info.type==3"
      >
        <el-link :href="info.file?.file_path" target="_blank" type="primary">{{ info.file?.real_name || info.file?.file_name }}</el-link>
      </el-form-item>
      <el-form-item
        label="审核结果"
        prop="status"
        class="required label-right-align"
        label-width="120px"
      >
        <el-radio-group v-model="formData.status" v-if="info.status==0">
          <el-radio :value="1">通过</el-radio>
          <el-radio :value="2">拒绝</el-radio>
        </el-radio-group>
        <el-text v-else :type="info.status==1?'success':'danger'">{{ info.status == 1 ? "通过" : "拒绝" }}</el-text>
      </el-form-item>
      <el-form-item
        label="原因"
        prop="reason"
        class="label-right-align"
        label-width="120px"
        v-if="formData.status == 2 || info.status==2"
      >
      <el-input
        v-model="formData.reason"
        style="width: 270px;min-height:150px;"
        :rows="2"
        type="textarea"
        placeholder="输入拒绝原因"
        v-if="info.status == 0"
      />
      <el-text v-else type="danger">{{ info.reason }}</el-text>
      </el-form-item>
      <el-form-item
        label="获得积分"
        prop="points"
        class="label-right-align"
        label-width="120px"
        v-if="formData.status == 1 && info.status!=2"
      >
        <el-input-number v-model="formData.points" :min="1" :max="999" v-if="info.status==0"/>
        <el-text v-else>{{ info.points }}</el-text>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogClose">关闭</el-button>
        <el-button type="primary" @click="submitForm" v-if="info.status==0"> 提交 </el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  defineExpose,
  defineEmits,
  onMounted,
  watch,
} from "vue";
import { ElMessage } from "element-plus";
import useUserStore from "@/store/model/user";
import { checkApi, getInfoApi } from "@/api/study";
const apiUrl = import.meta.env.VITE_BASIC_URL;
const userStore = useUserStore();
const dialogFormVisible = ref(false);
const dialogTitle = ref("资料审核");
const formRef = ref(null);
defineProps({
  department: {
    type: Array,
    default: [] as any[],
  },
});
const info = ref<any>({});
const formData = ref({
  id: 0,
  status: 1,
  reason: "",
  points: 1,
});
onMounted(() => {
  
});
const emits = defineEmits(["getTable"]);
function getInfo(id) {
  getInfoApi(id)
    .then((res: any) => {
      if (res.code == 1) {
        info.value = res.data;
      } else {
        ElMessage.error(res.msg);
      }
    })
    .catch((err) => {});
}

function submitForm() {
  checkApi(formData.value).then((res: any) => {
    ElMessage.success("保存成功");
    dialogClose();
    emits("getTable");
  });
}

const dialogClose = () => {
  dialogFormVisible.value = false;
};

const dialogOpen = (id: number) => {
  dialogFormVisible.value = true;
  getInfo(id);
  formData.value.id = id;
};

const handleClose = () => {
  formRef.value.resetFields();
  formData.value = {
    id: 0,
  status: 1,
  reason: "",
  points: 1,
  };
  dialogFormVisible.value = false;
};
defineExpose({
  dialogOpen,
});
</script>

<style lang="scss">
.el-form-item {
  margin-bottom: 10px;
  .video-box{
    width:300px;
  }
}
.el-select {
  width: 200px;
}
.upload-demo {
  .el-icon svg {
    height: 3em;
    width: 3em;
  }
}
</style>

<style lang="scss" scoped></style>
